<script >
import { defineComponent } from "vue";
import SvgIcon from "../../svgIcon/index.vue";

export default defineComponent({
  name: "userCenter",
  components: {
    SvgIcon,
  },
  computed: {
    username() {
      return (
        this.$store.getters["user/userName"] || this.$t("user.defaultNickname")
      );
    },
  },
  methods: {
    onLogout() {
      this.$confirm({
        title: this.$t("model.title"),
        content: this.$t("logout.notice"),
        cancelText: this.$t("logout.cancelBtnText"),
        onOk: () => {
          this.$store.dispatch("user/logout").then(() => {
            this.$router.push({
              path: "/login",
            });
          });
        },
      });
    },
    // 用户中心
    onPersonal() {
      this.$router.push("/personal");
    },
  },
});
</script>

<template>
  <a-popover placement="bottomRight" arrow-point-at-center>
    <template #content>
      <div class="user-action-item" @click="onPersonal">
        <SvgIcon :style="{ fontSize: '14px' }" name="userOutlined" />
        <span class="user-name"> {{ $t("personalCenter") }} </span>
      </div>
      <div class="user-action-item" @click="onLogout">
        <SvgIcon :style="{ fontSize: '14px' }" name="LogoutOutlined" />
        <span class="user-name"> {{ $t("logout.index") }} </span>
      </div>
    </template>
    <div class="action">
      <a-avatar :size="32">{{ username.substr(0, 2) }}</a-avatar>
      <span class="username">{{ username }}</span>
      <SvgIcon
        class="down-icon"
        :style="{ fontSize: '12px' }"
        name="caret-down-filled"
      />
    </div>
  </a-popover>
</template>

<style lang='less' scoped>
.action {
  padding: 0 20px 0 10px !important;

  .username {
    line-height: 32px;
    display: inline-block;
    margin: 0 4px 0 10px;
  }
  .down-icon {
    transition: all 0.5s ease;
  }
}
.action:hover .down-icon {
  transform: rotate(180deg);
}

.user-action-item {
  line-height: 40px;

  .user-name {
    display: inline-block;
    margin-left: 10px;
  }
}
.user-action-item:hover {
  cursor: pointer;
  color: @primary-color;
}

:deep(.ant-avatar) {
  background: @primary-color;
}
</style>